<template>
	<view class="content">
		<!-- 顶部  取车地点、时间、菜单 -->
		<view class="top-bg">
			<view class="title-btn-box r-nw-fs-c"
				:style="{'height':navBarHeight + 'px', 'marginTop': statusBarHeight + 'px'}">
				<image class="icon-back" src="./../../static/image/back.png" mode="widthFix" @click="goToBack()">
				</image>
				<text class="page-title">选择车型</text>
			</view>
			<view class="basic-info r-nw-fs-c">
				<view class="c-c-c info">
					<view class="address ellipsis">{{address}}</view>
					<view class="times">{{currentTime}} {{currentWeek}} - {{day}}天 - {{laterTime}}
						{{lastdayOfWeek}}
					</view>
				</view>
				<image style="width: 32rpx;height: 32rpx;position: relative;z-index: 9999;"
					src="../../static/image/edit.png" mode="widthFix" @click="goToBack()"></image>
				<view class="opcity-box"></view>
			</view>
			<view class="sort-box r-nw-sa-c">
				<view class="synthesis sort" @click="changeOrder('isSynthesisUp', !isSynthesisUp)">
					综合排序
					<image src="../../static/image/fall.png" class="fall" :class="{'fall-rotate': !isSynthesisUp}"
						mode="widthFix"></image>
				</view>
				<view class="allocation sort">
					<view @click.stop="changeOrder('isallocationUp', !isallocationUp)">
						<text v-if="fliterConfigArr.length === 0">车型配置</text>
						<text>{{fliterConfigArr.toString()}}</text>
						<image src="../../static/image/fall.png" class="fall" :class="{'fall-rotate': !isallocationUp}"
							mode="widthFix"></image>
					</view>
					<view class="config-filter" v-show="!isallocationUp">
						<view class="seat-triangle triangle"></view>
						<view class="config">
							<view class="type">
								车辆排挡
							</view>
							<view class="r-nw-fs-c" style="margin-top: 10rpx;">
								<view class="item c-c-c" :class="{'item-active': item.isChecked}"
									v-for="(item, index) in cartShift" :key="item.type" @click="changeCartShift(index)">
									{{item.name}}
								</view>
							</view>
							<view class="type">
								排量
							</view>
							<view class="r-nw-fs-c" style="margin-top: 10rpx;">
								<view class="item c-c-c"  :class="{'item-active': item.isChecked}"
									v-for="(item, index) in displacemen" :key="item.type" @click="changeDisplacemen(index)">
									{{item.name}}
								</view>
							</view>
							<view class="type">
								座位数
							</view>
							<view class="r-nw-fs-c" style="margin-top: 10rpx;">
								<view class="item c-c-c" :class="{'item-active': item.isChecked}"
									v-for="(item, index) in seatNum" :key="item.type" @click="changeSeatNum(index)">
									{{item.name}}
								</view>
							</view>
							<view class="btns r-nw-fe-c" style="margin-top: 30rpx;">
								<view class="cancel c-c-c" @click="cancel">重置</view>
								<view class="ok c-c-c item-active" @click="configOk" style="background-color: #F78500;">
									确定</view>
							</view>
						</view>
					</view>
				</view>
				<view class="price sort" @click="changeOrder('ispriceUp', !ispriceUp)">
					价格排序 <image src="../../static/image/fall.png" class="fall" :class="{'fall-rotate': !ispriceUp}"
						mode="widthFix"></image>
				</view>
			</view>
		</view>
		<!-- 左侧菜单、右侧内容 -->
		<view class="menus-box r-nw-sa-fs" :style="{'height': screenHeight + 'px'}">
			<scroll-view  scroll-y style="width: 140rpx;" :style="{'height': screenHeight + 'px'}" @scrolltolower="scrollMenus">
			<view class="left-menu">
				<view class="item-type ellipsis" v-for="item in menus" :key="item.id" @click="selectMeun(item.id)"
					:style="{'background': currentMenu === item.id ? '#F5F6F8' : '' }">
					{{item.name}}
				</view>
			</view>
			</scroll-view>
			<scroll-view scroll-y :style="{'height': screenHeight + 'px'}" @scrolltolower="scrolltolower">
				<view class="right-content">
					<view v-if="list.length > 0">
						<view class="item-cart" v-for="item in list" :key="item.id" @click="goToDetailConfig(item.id)">
							<view class="cart-top r-nw-fs-c">
								<image class="image" :src="item.cover" mode="widthFix"></image>
								<view class="content">
									<view class="name">{{item.name}}</view>
									<view class="desc r-nw-fs-c">
										<image :src="item.icon" style="width: 76rpx;height: 34rpx;" mode="aspectFit" v-if="item.icon"></image>
										<!-- <tag :type="item.type"></tag> -->
										<text
											class="text">{{item.describe}}</text>
									</view>
								</view>
							</view>
							<view class="cart-bottom r-nw-sb-c">
								<span class="total-price">总价：￥{{item.total_price}}</span>
								<view class="rent">
									<text style="font-size: 24rpx;color: #F78500;">￥</text><text
										style="color: #F78500;font-size: 36rpx;">{{item.average_price}}</text>/日均
								</view>
							</view>
						</view>
					</view>
					<view v-else class="none-data">
						暂无数据
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 车辆详情 -->
		<view class="popup fadelogIn" v-if="isPopupShow">
			<view class="popup-bg"  @click="isPopupShow = !isPopupShow"></view>
			<view class="popup-content">
				<swiper class="config-swiper" style="height: 430rpx;" mode="round"
					@change="e => swiperCurrent = e.detail.current">
					<swiper-item v-for="(item ,index) in detail.banner" :key="index">
						<image class="banner-item" :src="item" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				<view class="indexes c-c-c">
					{{swiperCurrent + 1}}/{{(detail.banner || '').length}}
				</view>
				<uni-card margin="24rpx" padding="0">
					<scroll-view scroll-y :style="{'height':systemHeight - 400 + 'px'}">
						<view class="cart-title r-nw-fs-c">
							<text class="cart-name">{{detail.name}}</text>
							<tag type="1" style="margin-left: 16rpx;"></tag>
						</view>
						<scroll-view scroll-x="true" style="white-space: nowrap;margin-top: 24rpx;">
							<view class="basic-conig-info c-fs-c" v-for="(item, index) in detail.base_config" :key="index">
								<view class="info-title">{{item.key}}</view>
								<view class="info-value">{{item.value}}</view>
							</view>
						</scroll-view>
						<view class="config-info">
							<view class="r-nw-sb-c">
								<view class="config-title">
									配置信息
								</view>
								<view class="dots-box r-nw-c-c" style="margin-right: 20rpx;">
									<view class="dots-item" :style="{width: (item == configSwiperIndex ? '32rpx' : '12rpx'), borderRadius: (item == configSwiperIndex ? '24rpx' : '50%')}" v-for="item in configSwiperLength" :key="item"></view>
								</view>
							</view>
							<swiper class="banner-swiper" mode="round" style="height: 500rpx;" :value="configSwiperIndex" @change="e => configSwiperIndex = e.detail.current">
								<swiper-item>
									<view class="config c-fs-fs" v-for="(item ,index) in (detail.high_light_config || '').slice(0,9)"
										:key="index">
										<view class="config-key ellipsis">{{item.key}}</view>
										<view class="config-value ellipsis">{{item.value}}</view>
									</view>
								</swiper-item>
								<swiper-item v-if="(detail.high_light_config || '').length >= 9">
									<view class="config c-fs-fs" v-for="(item ,index) in (detail.high_light_config || '').slice(9,18)"
										:key="index">
										<view class="config-key ellipsis">{{item.key}}</view>
										<view class="config-value ellipsis">{{item.value}}</view>
									</view>
								</swiper-item>
								<swiper-item v-if="(detail.high_light_config || '').length >= 18">
									<view class="config c-fs-fs" v-for="(item ,index) in (detail.high_light_config || '').slice(18,27)"
										:key="index">
										<view class="config-key ellipsis">{{item.key}}</view>
										<view class="config-value ellipsis">{{item.value}}</view>
									</view>
								</swiper-item>
							</swiper>						
						</view>
					</scroll-view>
				</uni-card>
				<view class="bottom-reserve r-nw-sb-c">
					<view class="spec">
						<text style="font-size: 24rpx;color: #F78500;font-weight: 500;">￥</text>
						<text class="price">{{detail.average_price}}</text>/日均
					</view>
					<button class="btn-reserve c-c-c" @click="goToOrder()">
						立即预定
					</button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import { CARTSHIFT, DISPLACEMEN, SEATNUM } from '@/utils/constants';
	import { carCategories, cars, carsDetail } from "@/utils/api.js";
	const app = getApp();
	export default {
		data() {
			return {
				configSwiperIndex: 0, // 配置轮播当前第几帧
				configSwiperLength: 0, //配置轮播总共几个swiper
				navBarHeight: app.globalData.navBarHeight,
				menuHeight: app.globalData.menuHeight,
				statusBarHeight: app.globalData.statusBarHeight,
				menuRight: app.globalData.menuRight,
				screenHeight: 0,
				currentMenu: 0,
				address: '',
				day: '--',
				currentTime: '--',
				currentWeek: '--',
				laterTime: '--',
				lastdayOfWeek: '--',
				isSynthesisUp: true, // 综合排序下
				isallocationUp: true, // 车型配置下
				ispriceUp: true, // 价格排序下
				swiperCurrent: 0,
				cartShift: [], // 车辆排挡
				displacemen: [], // 排量
				seatNum: [], // 座位数
				fliterConfigArr: [], // 配置筛选用于页面展示
				menus: [
					{
						id: 0,
						name: '全部车型'
					}
				],
				isPopupShow: false,
				list: [],
				carListCurrentPage: 1,
				detail: {},
				car_id: -1,
				menuCurrentPage: 1,
				systemHeight: 0
			}
		},
		onLoad() {
			// if(option?.path && option?.id) {
			// 	console.log(222, option)
			// }
			this.systemHeight = wx.getSystemInfoSync().windowHeight;
			this.screenHeight = wx.getSystemInfoSync().windowHeight - 195;
			this.getStorageData();
			this.cartShift = CARTSHIFT;
			this.displacemen = DISPLACEMEN;
			this.seatNum = SEATNUM;
			this.getcarCategories();
			this.getList();
		},
		onShow() {
			uni.removeStorageSync("is-auth-back");
		},
		methods: {
			// 菜单下拉分页
			scrollMenus() {
				this.menuCurrentPage++;
				this.getcarCategories()
			},
			// 车辆列表下拉加载
			scrolltolower() {
				this.carListCurrentPage++;
				this.getList();
			},
			// 车辆分类列表
			getcarCategories(){
				carCategories().then(res => {
					if(res.code == 200) {
						this.carListCurrentPage = res.data.current_page;
						this.menus = this.menus.concat(res.data.list);
					}
				})
			},
			// 获取缓存
			getStorageData() {
				this.day = uni.getStorageSync('totalNum');
				this.currentTime = uni.getStorageSync('startTime');
				this.currentWeek = uni.getStorageSync('startWeek');
				this.laterTime = uni.getStorageSync('endTime');
				this.lastdayOfWeek = uni.getStorageSync('endtWeek');
				this.address = uni.getStorageSync('address');
			},
			// 切换左侧菜单
			selectMeun(id) {
				this.currentMenu = id;
				this.list = [];
				this.carListCurrentPage = 1;
				this.getList();
			},
			// 车辆排挡选择
			changeCartShift(index) {
				this.cartShift.forEach((ele, key) => {
					if(index === key) {
						ele.isChecked = !ele.isChecked;
					}else {
						ele.isChecked = false;
					}
				})
			},
			// 排量选择
			changeDisplacemen(index) {
				this.displacemen.forEach((ele, key) => {
					if(index === key) {
						ele.isChecked = !ele.isChecked;
					}else {
						ele.isChecked = false;
					}
				})
			},
			// 座位数选择
			changeSeatNum(index) {
				this.seatNum.forEach((ele, key) => {
					if(index === key) {
						ele.isChecked = !ele.isChecked;
					}else {
						ele.isChecked = false;
					}
				})
			},
			// 车型配置-重置
			cancel() {
				this.cartShift.forEach(item => item.isChecked = false);
				this.displacemen.forEach(item => item.isChecked = false);
				this.seatNum.forEach(item => item.isChecked = false);
				this.fliterConfigArr = [];
				this.isallocationUp = true;
				this.getList();
			},
			// 车型配置-确定
			configOk() {
				this.fliterConfigArr = [];
				this.cartShift.forEach(item => {
					if(item.isChecked) {
						this.fliterConfigArr.push(item.name);
					}
				});
				this.displacemen.forEach(item => {
					if(item.isChecked) {
						this.fliterConfigArr.push(item.name);
					}
				});
				this.seatNum.forEach(item => {
					if(item.isChecked) {
						this.fliterConfigArr.push(item.name);
					}
				});
				this.isallocationUp = true;
				this.list = [];				this.carListCurrentPage = 1;
				this.getList();
			},
			// 获取车辆详情
			goToDetailConfig(id) {
				this.isPopupShow = true;
				this.car_id = id;
				uni.showLoading({
					title: '加载中...'
				})
				const startTime = uni.getStorageSync('startTime')
				const endTime = uni.getStorageSync('endTime')
				carsDetail(id,{
					start_time: startTime,
					end_time: endTime
				}).then(res => {
					if(res.code === 200) {
						uni.hideLoading();
						if(res.data.high_light_config.length > 0) {
							this.configSwiperLength = parseInt(res.data.high_light_config.length / 9) + 1;
						}
						this.detail = res.data;
					}
				})
				.catch(err => {})
			},
			// 订单详情页
			goToOrder() {
				let token = '';
				token = uni.getStorageSync('access_token');
				if(token) {
					uni.navigateTo({
						url: '/pages/index/orderDetail?id=' + this.car_id
					})
				} else {
					uni.setStorageSync('path', '/pages/index/cartType');
					uni.showModal({
						content: '您还没有登录授权',
						cancelText: "取消", // 取消按钮的文字
						confirmText: "去授权", // 确认按钮的文字
						confirmColor: '#FF5C1F',
						success: (res) => {
							if(res.confirm) {
								uni.navigateTo({
									// url: '/pages/auth/auth?id=' + this.car_id
									url: '/pages/auth/auth' 
								})
							} else {}
						}
					})
				}
			},
			// 菜单排序
			changeOrder(type, value) {
				if (type === 'ispriceUp') {
					this.ispriceUp = value;
					this.list = [];
					this.carListCurrentPage = 1;
					this.getList();
				} else if (type === 'isSynthesisUp') {
					this.isSynthesisUp = value;
					this.list = [];
					this.carListCurrentPage = 1;
					this.getList();
				} else if (type === 'isallocationUp') {
					this.isallocationUp = value;
				}
			},
			getList() {
				const startTime = uni.getStorageSync('startTime')
				const endTime = uni.getStorageSync('endTime')
				let data = {
					day: this.day,
					category_id: this.currentMenu,
					volume_direction: this.isSynthesisUp ? 'asc' : 'desc', // 综合排序
					configs: this.fliterConfigArr, // 车型配置
					price_direction: this.ispriceUp ? 'asc' : 'desc', // 价格排序
					page: this.carListCurrentPage,
					startTime,
					endTime
				}
				uni.showLoading({
					title:'加载中...'
				})
				cars(data).then(res => {
					if(res.code === 200) {
						uni.hideLoading();
						res.data.list.forEach(item => {
							this.list.push(item)
						})
						// this.list = res.data.list;
						this.carListCurrentPage = res.data.current_page;
					}
				})
				.catch(err => {})
			},
			goToBack() {
				uni.navigateBack()
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F6F8;
		position: relative;
	}
	button {
		margin-left: 0;
		margin-right: 0;
	}
	.dots-item {
		margin-right: 12rpx;
		height: 12rpx;
		background-color: #EDEEF0;
	}
	.fall {
		width: 32rpx;
		height: 32rpx;
		vertical-align: middle;
	}
	.fall-rotate {
		transform: rotate(180deg);
	}
	.top-bg {
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 364rpx;
		background: linear-gradient(270deg, #FF3315 0%, #FFB034 100%);
		.title-btn-box {
			width: 100%;
		}
		.basic-info {
			margin: 24rpx auto 0;
			position: relative;
			.opcity-box {
				position: absolute;
				top: 0;
				left: 0;
				width: 702rpx;
				height: 88rpx;
				background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 53%, rgba(255, 255, 255, 0) 100%);
				opacity: 0.3;
			}
			.info {
				position: relative;
				height: 88rpx;
				width: 679rpx;
				// margin: 0 auto;
				.address {
					width: 100%;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 24rpx;
					text-align: center;
					font-style: normal;
				}
				.times {
					margin-top: 8rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #FFFFFF;
					line-height: 20rpx;
					text-align: left;
					font-style: normal;
				}
			}
		}
		.sort-box {
			margin-top: 14rpx;
			height: 88rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			text-transform: none;
			.seat-triangle {
				transform: translateX(160rpx) translateY(-10rpx);
				border-bottom: 6px solid rgba(255,255,255,1);
			}
			.allocation {
				position: relative;
				.config-filter {
					position: absolute;
					top: 50rpx;
					padding: 0 25rpx 30rpx;
					width: 542rpx;
					background-color: #fff;
					border: 1rpx solid #ebebeb;
					box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
					border-radius: 12rpx;
					left: -147rpx;
					z-index: 99999;
					.type {
						margin-top: 40rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 26rpx;
						color: #333333;
						line-height: 42rpx;
					}
					.item {
						margin-right: 25rpx;
						width: 193rpx;
						height: 75rpx;
						background-color: #ebebeb;
						font-size: 26rpx; 
						color: #666666;
						border-radius: 10rpx;
					}
					.item-active {
						background-color: #FF561E;
						color: #fff;
					}
					.cancel, .ok {
						width: 150rpx;
						height: 60rpx;
						font-size: 24rpx;
						letter-spacing: 2rpx;
						border-radius: 5rpx;
						border: 1rpx solid transparent;
					}
					.cancel {
						border: 1rpx solid #999;
						color: #666666;
						margin-right: 20rpx;
					}
				}
			}
		}
	}
	.menus-box {
		width: 750rpx;
		overflow-y: hidden;
		position: absolute;
		top: 364rpx;
		left: 0;
		margin-top: 20rpx;
		.left-menu {
			height: 100%;
			background-color: #fff;
			.item-type {
				width: 140rpx;
				height: 120rpx;
				background: #FFFFFF;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				text-align: center;
				line-height: 120rpx;
			}
		}
		.right-content {
			margin: 0 24rpx 20rpx 14rpx;
			padding-bottom: 20rpx;
			.item-cart {
				margin-top: 16rpx;
				padding: 37rpx 20rpx 32rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				&:first-child {
					margin-top: 0;
				}
				.cart-top {
					.image {
						width: 176rpx;
						height: 420rpx;
					}
					.content {
						margin-left: 20rpx;
						.name {
							font-family: PingFangSC, PingFang SC;
							font-weight: 600;
							font-size: 32rpx;
							color: #333333;
							line-height: 32rpx;
						}
						.desc {
							margin-top: 20rpx;
							.text {
								margin-left: 6rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #666666;
								line-height: 32rpx;
							}
						}
					}
				}
				.cart-bottom {
					margin-top: 27rpx;
					.total-price {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 22rpx;
						color: #666666;
						line-height: 30rpx;
					}
					.rent {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 22rpx;
						color: #333333;
						line-height: 30rpx;
					}
				}
			}
		}
	}
	.popup {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		z-index: 999;
		background: rgba(0, 0, 0, .3);
		.popup-bg {
			width: 750rpx;
			height: 216rpx;
		}
		.popup-content {
			width: 100%;
			position: fixed;
			// top: 216rpx;
			top: 150rpx;
			left: 0;
			bottom: 0;
			background-color: #F5F6F8;
			.banner-item {
				width: 100%;
				height: 430rpx;
			}
			.indexes {
				position: absolute;
				left: 646rpx;
				top: 375rpx;
				z-index: 9999;
				width: 80rpx;
				height: 40rpx;
				background: #000000;
				border-radius: 20rpx;
				opacity: 0.4;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
			}
			.cart-name {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: #333333;
				line-height: 50rpx;
			}
			.config-info {
				margin-top: 40rpx;
				position: relative;
				.uni-swiper__dots-box {
					position: absolute;
				}
				.config-title {
					margin-bottom: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
					line-height: 44rpx;
				}
				.config {
					display: inline-block;
					margin-bottom: 16rpx;
					padding: 24rpx;
					width: 154rpx;
					height: 82rpx;
					background: #F5F6F8;
					border-radius: 16rpx;
					&:nth-child(3n+2) {
						margin: 0 16rpx;
					}
					.config-key {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
					}
					.config-value {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 22rpx;
						color: #999999;
					}
				}
			}
			.uni-card {
				padding: 32rpx !important;
				padding-right: 0 !important;
			}
			.basic-conig-info {
				display: inline-block;
				margin-right: 38rpx;
				&:first-child {
					padding-left: 0;
				}
				.info-title {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #999999;
					line-height: 30rpx;
				}
				.info-value {
					margin-top: 12rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
				}
			}
			.bottom-reserve {
				position: fixed;
				bottom: 0;
				left: 0;
				padding: 16rpx 45rpx 0 24rpx;
				width: 681rpx;
				height: 104rpx;
				background: #FFFFFF;
				.btn-reserve {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					width: 227rpx;
					height: 88rpx;
					background: linear-gradient( 270deg, #FF3315 0%, #FFB034 100%);
					border-radius: 16rpx;
				}
				.spec {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 22rpx;
					color: #333333;
					.price {
						font-size: 36rpx;
						color: #F78500;
						line-height: 50rpx;
					}
				}
			}
		}
	}
</style>